<template>
  <el-dialog title="" :visible.sync="visible" @close="$emit('update:visible', false)" destroy-on-close>
    <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="content"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
    />
    <template slot="footer">
      <el-button @click="$emit('update:visible', false)">取消</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { Editor } from '@wangeditor/editor-for-vue'
export default {
  name: 'ComRichText',
  components: { Editor },
  data() {
    return {
      editor: null,
      toolbarConfig: {
        excludeKeys: ['group-video','insertImage'],//屏蔽图片链接上传，视频上传
      },
      editorConfig: {
        placeholder: '暂无内容',
        readOnly:true
      },
      mode: 'default', // or 'simple'
    }
  },
  props: {
    content:String,
    visible:Boolean
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    // initEditor() {
    //   const editor = this.editor = new Editor({
    //     selector: '#editor-container',
    //     html: this.content,
    //     config: this.editorConfig,
    //     toolbar: this.toolbarConfig,
    //     mode: this.mode
    //   })
    //   editor.$on('change', (newHtml) => {
    //     this.content = newHtml
    //   })
    // },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
  }
}
</script>
